/* side-bar */
/* tabs */
.side-bar {
  @apply select-text;
}
.side-bar [data-reach-tabs] [data-reach-tab-list] {
  @apply space-x-0 bg-transparent rounded-none bg-white dark:bg-gray-900;
}
.side-bar [data-reach-tabs] [data-reach-tab] {
  @apply px-5 py-4 text-sm font-semibold uppercase border-none rounded-none xl:px-6;
}
.side-bar [data-reach-tabs] [data-reach-tab][data-selected] {
  @apply bg-gray-100 dark:bg-gray-1000;
}

/* cue note */
.cueplayer-react-cue-bar .cueplayer-react-cue-note {
  position: absolute;
  height: 100%;
  width: 6px;
  background-color: gray;
  cursor: pointer;
}

/* cue note */
.cueplayer-react-cue-bar .cueplayer-react-cue-note-learner {
  position: absolute;
  height: 100%;
  width: 6px;
  background-color: orange;
  cursor: pointer;
}

.cueplayer-react-cue-bar
  .cueplayer-react-cue-note.cueplayer-react-cue-note-active {
  @apply bg-white opacity-100;
}

.cueplayer-react-cue-bar
  .cueplayer-react-cue-note.cueplayer-react-cue-note-inactive {
  @apply bg-white opacity-50;
}


/* progress bar */
.cueplayer-react .cueplayer-react-progress-control {
  @apply bottom-0 w-full h-6 absolute flex px-2;
  transform: translateY(1.5rem);
}

/* cue bar */
.cueplayer-react .cueplayer-react-cue-bar {
  @apply bottom-0 h-4 z-10 absolute left-2 right-3 flex;
  transform: translateY(2.5rem);
}

/* control bar */
.cueplayer-react .cueplayer-react-control-bar {
  @apply flex bg-gray-1000 z-[10] h-10;
}

.cueplayer-react .cueplayer-react-fullscreen {
  @apply relative;
}

/* Hide side bar in fullscreen */
.cueplayer-react-fullscreen .side-bar {
  display: none;
}

.cueplayer-react
  .cueplayer-react-menu-button-popup
  .cueplayer-react-menu
  .cueplayer-react-menu-content {
  @apply bg-[#333539];
}

.cueplayer-react .cueplayer-react-menu {
  @apply w-40;
}

.cueplayer-react .cueplayer-react-menu .cueplayer-react-menu-item {
  @apply bg-transparent text-white py-2 text-xs;
  text-shadow: none;
}

.cueplayer-react .cueplayer-react-menu .cueplayer-react-menu-item:hover,
.cueplayer-react
  .cueplayer-react-menu
  .cueplayer-react-menu-item.cueplayer-react-selected {
  @apply bg-[#606163] text-white;
  text-shadow: none;
}

.cueplayer-react-current-time-display {
  @apply tabular-nums;
}

.cueplayer-react .cueplayer-react-control.cueplayer-react-playback-rate {
  @apply flex justify-center items-center;
}

.cueplayer-react
  .cueplayer-react-control.cueplayer-react-playback-rate
  .cueplayer-react-menu {
  @apply w-16;
}

.cueplayer-react
  .cueplayer-react-playback-rate
  .cueplayer-react-playback-rate-value {
  line-height: 1;
}

/* Hide some controls in mobile */
.cueplayer-react .cueplayer-react-control.cueplayer-react-replay-control,
.cueplayer-react .cueplayer-react-control.cueplayer-react-forward-control,
.cueplayer-react .cueplayer-react-control.cueplayer-react-volume-menu-button {
  @apply hidden sm:inline-block;
}

.cueplayer-react .cueplayer-react-control:before {
  font-size: 2.3em;
  line-height: 2.5rem;
  height: 2.5rem;
}

.cueplayer-react .cueplayer-react-control:hover:before {
  text-shadow: 0em 0em 0.5em #fff, 0em 0em 0.5em #fff;
}

.cueplayer-react .cueplayer-react-time-control,
.cueplayer-react
  .cueplayer-react-playback-rate
  .cueplayer-react-playback-rate-value {
  font-size: 1.3em;
  line-height: 2.5rem;
}

.cueplayer-react
  .cueplayer-react-volume-menu-button-horizontal:hover
  .cueplayer-react-menu-content,
.cueplayer-react
  .cueplayer-react-volume-menu-button-horizontal:focus
  .cueplayer-react-menu-content,
.cueplayer-react
  .cueplayer-react-volume-menu-button-horizontal
  .cueplayer-react-slider-active
  .cueplayer-react-menu-content,
.cueplayer-react
  .cueplayer-react-volume-menu-button-horizontal
  .cueplayer-react-lock-showing
  .cueplayer-react-menu-content {
  height: 2.5rem;
  display: flex;
  align-items: center;
}

.cueplayer-react
  .cueplayer-react-playback-rate.cueplayer-react-menu-button-popup
  .cueplayer-react-menu
  .cueplayer-react-menu-content {
  bottom: 2em;
  max-height: none;
}
